<template>
  <a-card :bordered="false">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="选择主表：" name="dbTable">
            <a-select v-model:value="formData.dbTable" :options="tableList" style="width: 100%" placeholder="请选择主表"
                      @select="selectTableColumnsData(formData.dbTable, false)"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="选择主键：" name="dbTableKey">
            <a-select v-model:value="formData.dbTableKey" :options="tableColumns" style="width: 100%"
                      placeholder="选择主键"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="表前缀移除：" name="tablePrefix">
            <a-radio-group v-model:value="formData.tablePrefix" :options="tablePrefixOptions"
                           @change="tablePrefixChange"></a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="生成方式：" name="generateType">
            <a-radio-group v-model:value="formData.generateType" :options="generateTypeOptions"></a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属模块：" name="module">
            <a-select v-model:value="formData.module" :options="moduleOptions" style="width: 100%"
                      placeholder="请选择所属模块" @change="moduleChange(formData.module, false)"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="上级目录：" name="menuPid">
            <a-tree-select
                v-model:value="formData.menuPid"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择上级目录"
                allow-clear
                tree-default-expand-all
                :tree-data="menuTreeData"
                :field-names="{
								children: 'children',
								label: 'title',
								value: 'id'
							}"
                selectable="false"
                tree-line
            ></a-tree-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="功能名：" name="functionName">
            <a-input v-model:value="formData.functionName" placeholder="请输入功能名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="业务名：" name="busName">
            <a-input v-model:value="formData.busName" placeholder="请输入业务名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="类名：" name="className">
            <a-input v-model:value="formData.className" placeholder="请输入类名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="表单布局：" name="formLayout">
            <a-radio-group v-model:value="formData.formLayout" :options="formLayoutOptions"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用栅格：" name="gridWhether">
            <a-radio-group v-model:value="formData.gridWhether" :options="gridWhetherOptions"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="排序：" name="sortCode">
            <a-slider v-model:value="formData.sortCode" :max="100" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="作者：" name="authorName">
            <a-input v-model:value="formData.authorName" placeholder="请输入作者名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="formData.generateType === 'BIZ'">
          <a-form-item label="包名：" name="packageName">
            <a-input v-model:value="formData.packageName" placeholder="请输入包名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script setup name="genBasic">
import {required} from '@/utils/formRules'
import {tool} from 'elead-ui-tool-v3'
import genBasicApi from '@/api/gen/genBasicApi'
const formRef = ref()
// 表单数据
const formData = ref({})
// 定义
const tableList = ref([])
const tableColumns = ref([])
const menuTreeData = ref([])
const submitLoading = ref(false)
const moduleOptions = ref()
const generateTypeOptions = ref([
  {
    label: '压缩包',
    value: 'ZIP'
  },
  {
    label: '项目内',
    value: 'PRO'
  }
])
const tablePrefixOptions = ref([
  {
    label: '移除',
    value: 'Y'
  },
  {
    label: '不移除',
    value: 'N'
  }
])
const formLayoutOptions = ref([
  {
    label: '垂直',
    value: 'vertical'
  },
  {
    label: '水平',
    value: 'horizontal'
  }
])
const gridWhetherOptions = ref([
  {
    label: '栅格布局',
    value: 'Y'
  },
  {
    label: '不使用',
    value: 'N'
  }
])
// 打开抽屉
const onOpen = (record) => {
  // 加载默认的模块
  moduleOptions.value = tool.data.get('MENU').map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })
  // 获取数据库中的所有表
  genBasicApi.basicTables().then((data) => {
    tableList.value = data.map((item) => {
      return {
        value: item['tableName'],
        label: `${item['tableRemark']}-${item['tableName']}`,
        tableRemark: item['tableRemark'] || item['tableName'],
        tableColumns: []
      }
    })
  })
  if (record) {
    const params = {
      id: record.id
    }
    submitLoading.value = true
    genBasicApi
        .basicDetail(params)
        .then((data) => {
          formData.value = data
          // 让主键选中
          selectTableColumnsData(data.dbTable, true)
          // 让模块旁边的上级菜单选中
          moduleChange(data.module, true)
        })
        .finally(() => {
          submitLoading.value = false
        })
  } else {
    formData.value = {
      sortCode: 99,
      tablePrefix: 'Y',
      generateType: 'ZIP',
      packageName: 'vip.xiaonuo',
      formLayout: 'vertical',
      gridWhether: 'N'
    }
  }
}
// 默认要校验的
const formRules = {
  tablePrefix: [required('请选择是否移除表前缀')],
  dbTable: [required('请选择主表')],
  dbTableKey: [required('请选择主表主键')],
  generateType: [required('请选择生成方式')],
  module: [required('请选择所属模块')],
  menuPid: [required('请选择上级目录')],
  functionName: [required('请输入功能名')],
  busName: [required('请输入业务名')],
  className: [required('请输入类名')],
  packageName: [required('请输入包名')],
  sortCode: [required('请选择排序')],
  formLayout: [required('请选择表单布局')],
  gridWhether: [required('请选择是否使用栅格')],
  authorName: [required('请输入作者名')]
}
// 选择模板的回调
const moduleChange = (value, assign) => {
  if (!assign) {
    // 先去掉值
    formData.value.menuPid = undefined
  }
  // 加载默认的模块
  const menuTree = tool.data.get('MENU').find((item) => {
    if (item.id === value) {
      return item
    }
  })
  menuTreeData.value = [
    {
      id: '0',
      title: '顶级',
      menuType: 'CATALOG',
      children: traverseChildren(menuTree.children)
    }
  ]
}
// 遍历增加属性
const traverseChildren = (data = []) => {
  // 递归遍历控件树
  const traverse = (array) => {
    array.forEach((element) => {
      if (element.menuType === 'CATALOG') {
        if (element.children) {
          traverse(element.children)
        }
      } else {
        // 设置不可用
        element.disabled = true
        element.selectable = false
      }
    })
  }
  traverse(data)
  return data
}
// 获取表字段
const selectTableColumnsData = (tableName, assign) => {
  if (!assign) {
    formData.value.dbTableKey = undefined
  }
  formFieldAssign(tableName)
  // 通过这个 tableName 查到这个表下的字段
  const param = {
    tableName: tableName
  }
  genBasicApi.basicTableColumns(param).then((data) => {
    tableColumns.value = data.map((item) => {
      return {
        value: item['columnName'],
        label: item['columnRemark'] || item['columnName']
      }
    })
  })
}
// 点击选择是否移除前缀
const tablePrefixChange = () => {
  const tableName = formData.value.dbTable
  if (tableName) {
    const tableNameHump = getTableNameToHump(tableName)
    formData.value.busName = tableNameHump.toLowerCase()
  }
}
// 表单内设置默认的值
const formFieldAssign = (value) => {
  const data = tableList.value.find((item) => item.value === value)
  formData.value.functionName = data.tableRemark
  const tableNameHump = getTableNameToHump(data.value)
  formData.value.busName = tableNameHump.toLowerCase()
  formData.value.className = getClassName(data.value)
}
// 获取数据库表的驼峰命名
const getTableNameToHump = (tableName) => {
  if (tableName) {
    const arr = tableName.toLowerCase().split('_')
    if (formData.value.tablePrefix === 'Y') {
      arr.splice(0, 1)
    }
    for (let i = 0; i < arr.length; i++) {
      // charAt()方法得到第一个字母，slice()得到第二个字母以后的字符串
      arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
    }
    return arr.join('')
  }
  return ''
}
// 获取数据库表的驼峰命名
const getClassName = (tableName) => {
  if (tableName) {
    const arr = tableName.toLowerCase().split('_')
    for (let i = 0; i < arr.length; i++) {
      // charAt()方法得到第一个字母，slice()得到第二个字母以后的字符串
      arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
    }
    return arr.join('')
  }
  return ''
}
// 验证并提交数据
const onSubmit = () => {
  return new Promise((resolve, reject) => {
    formRef.value
        .validate()
        .then(() => {
          submitLoading.value = true
          genBasicApi
              .submitForm(formData.value, !formData.value.id)
              .then((data) => {
                resolve(data)
              })
              .finally(() => {
                submitLoading.value = false
              })
        })
        .catch((err) => {
          reject(err)
        })
  })
}
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
  onSubmit
})
</script>
<style scoped>
.childAddButton {
  margin-bottom: 10px;
}
.form-row {
  background-color: var(--item-hover-bg);
  margin-left: 0px !important;
}
.form-row-con {
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 15px;
}
.form-div {
  padding-top: 10px;
}
</style>
